<template>
	<div class="ruijie-main">
		<div class="ruijie-main-header-con">
			<div class="ruijie-main-header">
				<div class="logo">
					<img src="../../assets/logo.png"/>
				</div>
				<Header></Header>
			</div>
		</div>
		<div class="ruijie-user-main-page">
			<div class="leftMenu">
				<div class="userImg">
					<img src="../../assets/images/touxiang.png" />
					<p>{{user.userName}}</p>
					<div class="border"></div>
				</div>
				<el-menu class="userCommonMenu" :default-active="currentPageName">
					<router-link :to="{name:'myBooked-index'}">
						<el-menu-item index="myBooked-index"><i class="iconfont icon-icon"></i> <span slot="title">我的预订</span></el-menu-item>
					</router-link>
					<router-link :to="{name:'myCollection'}">
						<el-menu-item index="myCollection"><i class="iconfont icon-star"></i><span slot="title">我的收藏</span></el-menu-item>
					</router-link>
					<!--<router-link :to="{name:'myNeedTodo'}">-->
						<!--<el-menu-item index="myNeedTodo"><i class="iconfont icon-seal"></i><span slot="title">待审批</span></el-menu-item>-->
					<!--</router-link>-->
				</el-menu>
			</div>
			<router-view></router-view>
		</div>
	</div>
</template>
<script type="es6">
import Header from '../components/Header';
import {mapState} from 'vuex';
export default {
  data () {
    return {
      menuList: []
    };
  },
  components: {
    Header
  },
  computed: {
    ...mapState({
      user: state => state.user
    }),
    currentPageName () {
      if (this.$route.meta && this.$route.meta.parentNode) {
        return this.$route.meta.parentNode;
      }
      return this.$route.name;
    }
  },
  methods: {},
  mounted () {
  }
};
</script>
<style lang="less">
	@import "../../styles/userCommon.less";
	.userCommonMenu.el-menu{
		border-right: none;
		margin-left: 20px;
		.el-menu-item:hover,.el-menu-item:focus,.el-menu-item:active{
			background-color: transparent;
		}
		.el-menu-item{
			color: #8e8e8e;
			i{
				margin-right: 10px;
			}
		}
		.el-menu-item.is-active{
			color: #409EFF;
		}
	}
</style>
